本系列目錄 《來做個網路瀏覽器吧！》文章列表

Why

很久以前就想寫關於瀏覽器的系列文章了，至於多久以前，其實大概也才幾個月吧。幾個月前我突然想往開源社群發展，誤打誤撞便開始了我對 Mozilla 的 Servo 專案的貢獻之路。Servo 專案是新一代瀏覽器引擎，強調平行化處理，因此速度會更快。在上面我也算是活躍社群貢獻者，幾個月下來對瀏覽器引擎開發也算或多或少有了解。事實上我更想從網路上吸取大量相關知識，可惜瀏覽器不是顯學，幾乎沒什麼資料可以參考，有也就那幾篇。而我專門挑中文資料缺少的領域寫文章，雖然其實這次英文資料也少得可憐，如果能讓中文界對於瀏覽器的了解更深一步，我很樂意寫文章彌補一點缺憾！系列大概分兩大主軸，其一是輕鬆簡單的原理和背景知識，其二則是比較進階的實作方式。

What

何謂瀏覽器，大家每天都在用，感覺我都不需要說明了呢！你每天用的 Chrome、Firefox 就是瀏覽器，你操作的是他的使用者介面，也就是網頁的畫面呈現好了，你還可以使用一些介面上功能，例如書籤、歷史紀錄、回到上一頁等等之類的東西，方便你瀏覽網頁。但是在你看到「看得到的」網頁之前，網頁都只是冰冷的程式碼，這就要靠瀏覽器引擎來做處理，讓程式碼變成一塊一塊的圖形和文字。一個好的瀏覽器要兼具使用介面友善跟程式處理快速，簡單來說就是你使用起來覺得很直觀很方便，瀏覽網站的時候覺得速度很快。在排除網路速度、電腦規格的情況下，好的瀏覽器帶你上天堂，爛的瀏覽器讓你生不如死。

How

簡單來說，瀏覽器會先從對方的伺服器（也就是網址，像是 https://tigercosmos.github.io)下載網頁的原始碼，網頁原始碼通常會有很多檔案，但最簡單來說就是 html 、 js 、 css，下載完之後，瀏覽器會解析原始碼生成 dom tree、rule tree 和 rendering tree。最後把 layout 渲染在你所看到的螢幕畫面。
有點玄？ 我們仔細來分析。

下載

瀏覽器首先向你在上面搜尋欄位輸入的網址（URL）提出請求，對方伺服器就會把第一份檔案 index.html 傳給你。這邊要說一下伺服器原理，當你輸入網址的時候，伺服器收到訊息說有人向他要檔案，但是這時候伺服器只會給你一個「最原始的 html」，這跟網頁的形成架構有關係，因為一個網頁是由第一個 html 去連結更多的 html 、 js 、 css。當下載完 index.hmtl 之後，瀏覽器會根據這份文件去把其他檔案，以及其他檔案連結的更多檔案通通下載下來。
雖然說網路速度影響這步驟很多，但別小看這步驟，如何下載也是有學問的，比方說你要是能提早知道該下載，那不就變快了嗎？這部分還牽扯到網站的優化以及 HTTP 協定，甚至更多細節。

解析

網頁原始碼中，我們把 html 稱之為 DOM tree，而 css 可以稱為 rule tree，兩者結合起來稱為 render tree。 DOM 可以想像成網頁中的一塊一塊元素，rule 則是賦予一塊一塊元素形狀、大小、顏色等等，因為靠這前兩者的結合我們可以把畫面弄出來，進而可以渲染，所以叫 render tree。
而 js 的功能則是去變化 DOM tree 和 rule tree，並且是「事後改變」，比方說按按鈕之後增加元素，送出資料改變畫面部分內容之類的。

Layout ＆ Render

在前一個步驟解析完之後，瀏覽器就知道這個網站的 tree 長怎樣，計算完每個 tree 節點的位子和大小形狀顏色，進而可以依照 render tree 順序把網站畫出來。網頁的元素是照順序排列，從左到右，從上到下，任一元素變化都會造成其他元素移位，就像是搭捷運人擠人那樣，這種情況稱為 reflow。而當 render tree 有變化時候，layout 便會被從新計算，進而重新 render(reflow)。

解析和渲染可以說是瀏覽器最最關鍵的部分，效能好不好，速度快不快基本上就靠這邊的技術了，而之後也會針對這幾個主題詳細討論。今天就到這邊囉～大家明天見！

關於作者

劉安齊

軟體工程師，熱愛寫程式，更喜歡推廣程式讓更多人學會

• 個人網站
• Github
• FB粉專--微中子